

<template>
    <div class="person">
       
        <h2>体温：{{temp}}</h2>
        <h2>心跳：{{ HR}}</h2>
        
        <button @click="changeTemp()">修改体温</button>
        <button @click="changeHR()">修改心跳</button>
        
    </div>

</template>

<script setup lang="ts" name="Person">
import { ref,watch,watchEffect } from 'vue';
    let temp=ref(36)
    let HR=ref(80)

    
    function changeTemp(){
        temp.value+=1
    }
    function changeHR(){
        HR.value+=10
    }
   
    // 使用watch进行数据监控,需要明确指出要监控的数据对象
    // watch([temp,HR],(value)=>{
    //     console.log("数据发生了变化",value) 
    //     let [temp,HR]=value
    //     console.log(temp)      
    //     console.log(HR)    
    //     if(temp>=40||HR>=120){
    //         console.log("身体情况异常")
    //     }
    // })
    // watchEffect进行监控数据时，不需要指出，他会自动判断函数中调用的数据，进行自动监控
    let stopWatch=watchEffect(()=>{
        console.log("watchEffect调用")
        if(temp.value>=40||HR.value>=120){
            console.log("身体出现异常")
        }
        if(temp.value==42||HR.value==180){
            console.log("发生危险，紧急救治")
            stopWatch()
        }
    })



</script>
<style>
.person{
    background-color: lightseagreen;
	box-shadow: 6px 6px 12px gray;
	border-radius: 6px;
	line-height: 40px;
	padding:10px;

}
</style>